<template>
	<view>
		<view class="detail_header_title">
			单号-{{Detail_code}}
			<!-- <image  src="../../../static/changeIcon.png" @tap="Switchstyles()" ></image> -->
		</view>
		<scroll-view scroll-x class="detail_body">

			<view class="Detail_table" v-show="Switchstyle==1" style="background-color: #FFFFFF;">
				<!-- 表格形式 -->
				<scroll-view scroll-x style="width: 1650px;">
					<table border="1" class="Detail_table_list" v-if='BillType==11||BillType==12'>
						<tr class="trtdpadd">
							<th nowrap="nowrap">序号</th>
							<th nowrap="nowrap">单据编号</th>
							<th nowrap="nowrap">单据总金额</th>
							<th nowrap="nowrap">已结算金额</th>
							<th nowrap="nowrap">未结算金额</th>
							<th nowrap="nowrap">本次结算额</th>
						</tr>
						<tr v-for="(item,index) in Detail_info" :key="item.id" class="trtdpadd">
							<td> {{index+1}}</td>
							<td>{{item.BillNo}}</td>
							<td>{{item.Amount}}</td>
							<td>{{item.pamount}}</td>
							<td>{{item.Total}}</td>
							<td>{{item.PayTotal}}</td>
						</tr>
					</table>
					<table border="1" class="Detail_table_list" v-else>
						<tr class="trtdpadd">
							<th nowrap="nowrap">序号</th>
							<th nowrap="nowrap">商品名称</th>
							<th nowrap="nowrap">编号</th>
							<th nowrap="nowrap">规格</th>
							<th nowrap="nowrap">单位</th>
							<th nowrap="nowrap">仓库</th>
							<th nowrap="nowrap">批号</th>
							<!-- 		<th nowrap="nowrap">生产日期</th>
							<th nowrap="nowrap">到期日期</th> -->
							<th nowrap="nowrap">单价</th>
							<th nowrap="nowrap">折扣</th>
							<th nowrap="nowrap">金额</th>
							<th nowrap="nowrap">数量</th>
							<th nowrap="nowrap">备注</th>
						</tr>
						<tr v-for="(item,index) in Detail_info" :key="item.id" class="trtdpadd">
							<td> {{index+1}}</td>
							<td>{{item.GoodsName}}</td>
							<td>{{item.GoodsCode}}</td>
							<td>{{item.Spec}}</td>
							<td>{{item.UnitName}}</td>
							<td>{{item.stockName}}</td>
							<td>{{item.BatchNo || ""}}</td>
							<!-- <td>{{timesubstr(item.ProductionDate)}}</td>
							<td>{{timesubstr(item.validityDate)}}</td> -->
							<td>{{toFix(item.Price)}}</td>
							<td>{{item.Discount}}</td>
							<td>{{toFix(item.Amount)}}</td>
							<td>{{toFix(item.Qty)}}</td>
							<td>{{item.Remark}}</td>
						</tr>
					</table>
				</scroll-view>
			</view>
			<!-- 列表形式 -->
			<scroll-view scroll-y style="overflow-y: scroll;height: 82%;padding-bottom: 60px;" v-show="Switchstyle==2">
				<!-- :class="['user_list',{'user_list_success':index == checklist}]" -->
				<block v-if="BillType==11||BillType==12">
					<view v-for="(item,index) in Detail_info" :class="['item_list',{'item_table':index == unfold}] " :key="item.id">
						<p>单据编号：{{item.BillNo}}</p>
						<p>单据总金额：{{item.Amount}} </p>
						<p>未结算金额：{{item.Total}}</p>
						<p>已结算金额：{{item.pamount}}</p>
						<!-- <p>生产日期：{{timesubstr(item.ProductionDate)}} <span style="margin-left: 15px;">到期日期：{{timesubstr(item.validityDate)}}</span></p> -->
						<p>本次结算额：{{toFix(item.PayTotal)}} </p>
						<div class="radius" @tap="unfolds(index)">
							<div class="d3" v-if="index != unfold"></div>
							<div class="d4" v-else></div>
						</div>
					</view>
				</block>
				<block v-else>
					<view v-for="(item,index) in Detail_info" :class="['item_list',{'item_table':index == unfold}] " :key="item.id">
						<p>商品名称：{{item.GoodsName}}</p>
						<p>编号：{{item.GoodsCode}} <span style="margin-left: 15px;">规格：{{item.Spec}}</span></p>
						<p>单位：{{item.UnitName}}<span style="margin-left: 15px;">仓库：{{item.stockName}}</span></p>
						<p>批号：{{item.BatchNo || ""}}</p>
						<!-- <p>生产日期：{{timesubstr(item.ProductionDate)}} <span style="margin-left: 15px;">到期日期：{{timesubstr(item.validityDate)}}</span></p> -->
						<p>单价：{{toFix(item.Price)}} <span style="margin-left: 15px;">折扣：{{item.Discount}}</span></p>
						<p>金额：{{toFix(item.Amount)}}<span style="margin-left: 15px;">数量：{{toFix(item.Qty)}}</span></p>
						<p>备注：{{item.Remark}}</p>
						<div class="radius" @tap="unfolds(index)">
							<div class="d3" v-if="index != unfold"></div>
							<div class="d4" v-else></div>
						</div>
					</view>
				</block>
			</scroll-view>
		</scroll-view>
		<view class="Detail_footer">
			<view class="Detail_sum">总行数:{{Detail_length}}
				<block v-if='BillType!=11&&BillType!=12'>总数量:{{Detail_sum}} </block>
				总金额:{{Detail_money}}
			</view>
			<view class="btnall">
				<!-- <view class="qiehuan" @tap="Switchstyles()">切换风格</view> -->
				<view class="btn_back" @tap="back">返回上页</view>
				<!-- <view class="btn_back" @tap="change">修改单据</view> -->
			</view>

		</view>
	</view>
</template>

<script>
	import * as ApiBb from '@/syApis/sygetOrder/apis.js';
	export default {
		data() {
			return {
				Detail_info: [], //商品明细数据
				Detail_length: 0, //商品明细总行数
				Detail_sum: 0, //商品明细总数量
				Detail_money: 0, //商品明细总金额
				Detail_code: '', //商品明细单号
				Switchstyle: 2, //明细风格切换
				unfold: -1, // 展开
				BillType: "",
				NowOrder: {} //当条数据
			}
		},
		onLoad: function(options) {
			this.Detail_code = options.BillNo; //明细单号
			let detailid = options.id
			this.BillType = options.BillType;
			console.log('新的页面打印')
			console.log(options)
			// 采购入库单明细
			if (this.BillType == 11 || this.BillType == 12 || this.BillType == 18) {
				this.selectPayDetail(detailid);
				//this.getPayOrder(detailid);
			} else {
				this.selectDetail(detailid) //初始化查询明细
				//this.getThisOrder(detailid);
			}

		},
		methods: {
			//获取当条数据
			getThisOrder(BillID) {
				let data = {
					BillType: this.BillType,
					Filter: "BillID=" + BillID
				}
				var that = this;
				ApiBb.SelectBillMaster(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == "获取登录信息失败") {
							ApiBb.showTip("登录超时");
						} else if (res.data.ErrorMsg != "") {
							ApiBb.showTip(res.data.ErrorMsg);
						} else if (res.data.TipsMsg == "OK" && res.data.ResultMsg == "") {
							ApiBb.showTip("查无数据");
						} else {

							res.data.ResultMsg.forEach((item, index) => {
								res.data.ResultMsg[index].UpdateTime = "";
							});
							that.NowOrder = res.data.ResultMsg[0];
						}
					} else {
						ApiBb.showTip("服务器错误!");
					}
				});

			},
			//获取当条数据
			getPayOrder(BillID) {
				let data = {
					BillType: this.BillType,
					Filter: "PayID=" + BillID
				}
				var that = this;
				ApiBb.SelectBillPay(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == "获取登录信息失败") {
							ApiBb.showTip("登录超时");
						} else if (res.data.ErrorMsg != "") {
							ApiBb.showTip(res.data.ErrorMsg);
						} else if (res.data.TipsMsg == "OK" && res.data.ResultMsg == "") {
							ApiBb.showTip("查无数据");
						} else {

							res.data.ResultMsg.forEach((item, index) => {
								res.data.ResultMsg[index].UpdateTime = "";
							});
							that.NowOrder = res.data.ResultMsg[0];
						}
					} else {
						ApiBb.showTip("服务器错误!");
					}
				});

			},
			//修改单据
			change() {
				let BillName = this.getBillName(this.BillType);
				if (this.BillType == '7') {
					uni.navigateTo({
						url: "../../add-order-allot/add-cgorder-allot?BillName=" + BillName + "&oldOrder=" + JSON.stringify(this.NowOrder) +
							"&type=1"
					})
				} else if (this.BillType == 11 || this.BillType == 12 || this.BillType == 18) {
					uni.navigateTo({
						url: "../../add-order-gathering/add-order-gathering?BillName=" + BillName + "&oldOrder=" + JSON.stringify(this.NowOrder) +
							"&type=1"
					})
				} else {
					uni.navigateTo({
						url: "../../add-order-rk-ck/add-cgorder-rk-ck?BillName=" + BillName + "&oldOrder=" + JSON.stringify(this.NowOrder) +
							"&type=1"
					})
				}
			},
			//获取单据名称
			getBillName(billtype) {
				switch (billtype) {
					case "2":
						return "采购入库单";
					case "3":
						return "采购退货单";
					case "5":
						return "销售出库单";
					case "6":
						return "销售出库单";
					case "7":
						return "调拨单";
					case "8":
						return "其他入库单";
					case "9":
						return "其他出库单";
					case "11":
						return "收款单";
					case "12":
						return "付款单";
					case "18":
						return "会员充值";
				}
			},
			onNavigationBarButtonTap(e) {
				const index = e.index;
				console.log(index);
				if (index === 0) {
					this.Switchstyles();
				} else if (index === 1) {

				}
			},
			// 查看明细
			selectDetail: function(e) {
				var that = this;
				let ClientID = uni.getStorageSync("UserCode");
				let CreateName = uni.getStorageSync("UserName");
				let Detailid = e;
				let data = {
					BillType: this.BillType,
					Database: 'FastApp',
					BillID: Detailid
				};
				ApiBb.SelectBillDetail(data, function(res) {
					if (res.state) {
						console.log(res)
						if (res.data.ErrorMsg == "获取登录信息失败") {
							ApiBb.showTip("登录超时");
						} else if (res.data.ErrorMsg != "") {
							ApiBb.showTip(res.data.ErrorMsg);
						} else {
							// Detail_length:0,//商品明细总行数
							// Detail_sum:0,//商品明细总数量
							// Detail_money:0,//商品明细总金额
							console.log('这是长度')
							console.log(res.data.ResultMsg.length)
							that.Detail_info = res.data.ResultMsg;
							let money = 0;
							let sum = 0;
							for (let i in res.data.ResultMsg) {
								money += parseFloat(res.data.ResultMsg[i]['Amount']) //总金额
								sum += parseFloat(res.data.ResultMsg[i]['Qty']) //总数量
							}
							that.Detail_length = res.data.ResultMsg.length;
							that.Detail_sum = sum.toFixed(2);
							that.Detail_money = money.toFixed(2);
							// that.Detail_code = that.tableList[e]['BillNo']
							// price.toFixed(2);
							console.log('这是总金额')
							console.log(money.toFixed(2))
							console.log('这是总数量')
							console.log(sum.toFixed(2))
						}
					} else {
						ApiBb.showTip("服务器错误!");
					}
				});
				console.log(e)
			},
			// 查看收付款单明细
			selectPayDetail: function(e) {
				var that = this;
				let ClientID = uni.getStorageSync("UserCode");
				let CreateName = uni.getStorageSync("UserName");
				let Detailid = e;
				let data = {
					BillType: this.BillType,
					Database: 'FastApp',
					BillID: Detailid
				};
				ApiBb.SelectBillPayDetail(data, function(res) {
					if (res.state) {
						console.log(res)
						if (res.data.ErrorMsg == "获取登录信息失败") {
							ApiBb.showTip("登录超时");
						} else if (res.data.ErrorMsg != "") {
							ApiBb.showTip(res.data.ErrorMsg);
						} else {
							// Detail_length:0,//商品明细总行数
							// Detail_sum:0,//商品明细总数量
							// Detail_money:0,//商品明细总金额
							console.log('这是长度')
							console.log(res.data.ResultMsg.length)
							that.Detail_info = res.data.ResultMsg;
							let money = 0;
							let sum = 0;
							for (let i in res.data.ResultMsg) {
								money += parseFloat(res.data.ResultMsg[i]['Amount']) //总金额
								sum += parseFloat(res.data.ResultMsg[i]['Qty']) //总数量
							}
							that.Detail_length = res.data.ResultMsg.length;
							that.Detail_sum = sum.toFixed(2);
							that.Detail_money = money.toFixed(2);
							// that.Detail_code = that.tableList[e]['BillNo']
							// price.toFixed(2);
							console.log('这是总金额')
							console.log(money.toFixed(2))
							console.log('这是总数量')
							console.log(sum.toFixed(2))
						}
					} else {
						ApiBb.showTip("服务器错误!");
					}
				});
				console.log(e)
			},
			// 日期截取
			timesubstr: function(e) {
				if (e == "" || typeof e == "undefined") {
					return "";
				}
				return e.substring(0, 10)
			},
			//保留两位小数
			toFix: function(evt) {
				if (evt == "" || evt == undefined) {
					return evt
				}
				evt = parseFloat(evt);
				return evt.toFixed(2) //此处2为保留两位小数
			},
			//是否展开
			unfolds: function(e) {
				if (this.unfold == e) {
					this.unfold = -1
				} else {
					this.unfold = e
				}
			},
			//返回上一页
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//切换风格
			Switchstyles: function() {
				this.Switchstyle = this.Switchstyle == 1 ? 2 : 1
			},
		}
	}
</script>

<style>
	@import url("selectdetail.css");
	/* page {
		background-color: #EEEEEE;
		padding-bottom: 0upx;
		height: 100%;
	} */
</style>
